<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<script type="text/javascript" src="book/third/jquery.min.1.7.js"></script>
	<script type="text/javascript" src="book/js/turn.min.js"></script>
	<script type="text/javascript" src="highlight.min.js"></script>
	<link rel="stylesheet" href="atom-one-dark.min.css" />
	<link rel="stylesheet" href="book/css/main.css" />
	<link rel="stylesheet" href="book/css/book.css" />
	<style>
	.page-wrapper { top: 0px !important; }
	.shadow { visibility: hidden; }
	body { background: black; }
	.sj-book .p1 { background-image: none !important; }
	#test-container { width: 410px; height: 520px; position: relative; background: #FFFFFF; overflow-x: hidden; overflow-y: scroll; }
	#mainContainer { display: none; position: absolute; top: 0; right: 0; left: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; word-wrap: break-word; background: white; }
	#canvas { display: none; }
	</style>
</head>
<body>
	<div id="canvas">
		<div id="book-zoom">
			<div class="sj-book">
				<div class="own-size page odd" style="width: 460px; height: 582px; float: left; position: absolute; inset: 0px auto auto 0px; transform-origin: 0% 0%;">
					<div class="book-content-container" style="background:white;">
						<div id="test-container">
							<%children%>
						</div>
					</div>
				</div>
				<span class="page-number">1</span>
			</div>
		</div>
	</div>
	<div id="mainContainer">
		<%children1%>
	</div>
	<script type="text/javascript">
	const boxHeight = 520;
	function post(url, data, callback) {
		const ajax = new XMLHttpRequest();
		ajax.open( 'post' , url , true );
		ajax.setRequestHeader('Content-Type', 'application/json');
		ajax.onreadystatechange = function () {
			if (ajax.readyState == 4 && ajax.status == 200) {
				console.log(url, 'post success');
				callback && callback(ajax.responseText);
			}
		}
		ajax.send(JSON.stringify(data));
	}
	function getPages(pageCount, pageIndex, offsetTop, offsetHeight) {
		const container = $('#test-container')[0];
		container.scrollTo(0, boxHeight * (pageIndex - 1) - offsetTop);
		container.style.height = `${boxHeight + offsetHeight}px`;
		if (pageIndex === undefined) {
			if (<%build%>) {
				post('/build', { pageCount: (pageCount%2 ? pageCount+1 : pageCount)+4, realPageCount: pageCount }, result => document.write(result));
			} else {
				window.location.href = '/main.html?pageCount='+((pageCount%2 ? pageCount+1 : pageCount)+4);
			}
		}
	}
	function loadApp() {
		var flipbook = $('.sj-book');

		// Flipbook
		flipbook.turn({
			elevation: 50,
			autoCenter: true,
			gradients: true,
			duration: 1000,
			pages: 1,
		});
		flipbook.addClass('animated');
		var pageIndex = <%pageIndex%>;
		var offset = '<%o%>';
		var pageCountOffset = <%pageCountOffset%>;
		var offsetTop = 0;
		var offsetHeight = 0;
		if (offset !== 'undefined') {
			var list = offset.split(/,|，/);
			offsetTop = +list[0] || 0;
			offsetHeight = (+list[1] || 0)+offsetTop;
		}
		// Show canvas
		if (pageIndex != undefined) {
			$('#canvas').css({visibility: ''});
		}
		const n = $('#page').height() / boxHeight;
		const pageCount = Math.ceil(n) + (pageCountOffset || 0);
		console.log('n=', n, 'pageCountOffset=', pageCountOffset, 'pageCount =', pageCount, '这里注意，我们的最大页数用pageCountOffset修正，pageCount + pageCountOffset = 实际最大数，');
		setTimeout(()=>{
			getPages(pageCount, pageIndex, offsetTop, offsetHeight);
		}, 50);
	}

	// 如果宽度小于700，则使用文档显示
	if (window.screen.width <= 700) {
		$('#mainContainer').css({display: 'block'});
	} else {
		$('#canvas').css({display: 'block', visibility: 'hidden'});
		loadApp();
	}
</script>
</body>
</html>
